<h3 class="devui-h3-title">{{ 'components.design-font.fontDemo.instance.title' | translate }}</h3>

<div>
  <span class="page-first-card-title">{{ 'components.design-font.fontDemo.instance.description1' | translate }}</span>
</div>
<div>
  <span class="content">{{ 'components.design-font.fontDemo.instance.description2' | translate }}</span>
</div>

<h3 class="devui-h3-title">{{ 'components.design-font.fontDemo.instance.tableTitle' | translate }}</h3>
<d-data-table #datatable [dataSource]="fonts" [scrollable]="true">
  <d-column field="name" header="{{ 'components.design-font.fontDemo.instance.defaultTable.fontName' | translate }}" [width]="'150px'">
  </d-column>
  <d-column field="value" header="{{ 'components.design-font.fontDemo.instance.defaultTable.themeValue' | translate }}" [width]="'150px'">
  </d-column>
  <d-column
    field="description"
    header="{{ 'components.design-font.fontDemo.instance.defaultTable.description' | translate }}"
    [width]="'200px'"
  >
  </d-column>
</d-data-table>
